<template>
  <!--面包屑-->
    <el-row>
        <div class="breadcrumb">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item to="/">主页</el-breadcrumb-item>
                <el-breadcrumb-item to="/wisdomeat">智慧食堂</el-breadcrumb-item>
                <el-breadcrumb-item>管理员管理</el-breadcrumb-item>
                <el-breadcrumb-item>商家审核</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
    </el-row>
  <!--    数据表格-->
    <el-row>
        <el-table :data="applicationList" stripe border style="width: 99%">
            <el-table-column type="index" label="序号" align="center" width="60px"/>
            <el-table-column prop="abnumber" label="申请商家" align="center"/>
            <el-table-column prop="ename" label="审核状态" align="center">
                <template #default="scope">
                    <el-tag type="danger" v-if="scope.row.aexamineId===3">{{scope.row.ename}}</el-tag>
                    <el-tag type="primary" v-if="scope.row.aexamineId===1">{{scope.row.ename}}</el-tag>
                    <el-tag type="success" v-if="scope.row.aexamineId===2">{{scope.row.ename}}</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="atime" label="申请时间" align="center" :formatter="FormatTime"/>
            <el-table-column label="操作" align="center">
                <template #default="scope">
                    <el-button type="text" @click="btnCheckClick(scope.row)">详情</el-button>
                    <el-button type="text" @click="btnAgreeClick(scope.row)">同意</el-button>
                    <el-button type="text" @click="btnRefuseClick(scope.row)">拒绝</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--        逻辑分页-->
        <el-config-provider>
            <el-pagination
                    :current-page="page.currentPage"
                    :page-size="page.pageSize"
                    background
                    layout="total, prev, pager, next,jumper"
                    :total="page.totalCount"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
            />
        </el-config-provider>
    </el-row>
<!--    商家详情弹窗-->
    <el-dialog v-model="businessDetail.show" width="500px">
        <template #header>
            商家详情
        </template>
        <el-form class="dialog-style">
            <el-form-item label="商家编号：">
                {{businessDetail.bNumber}}
            </el-form-item>
            <el-form-item label="商家名称：">
                {{businessDetail.bName}}
            </el-form-item>
            <el-form-item label="商家电话：">
                {{businessDetail.bPhone}}
            </el-form-item>
            <el-form-item label="商家地址：">
                {{businessDetail.bAddress}}
            </el-form-item>
        </el-form>
    </el-dialog>
</template>

<script>
import axios from "axios";
import moment from "moment/moment.js";
import {ElMessage} from "element-plus";

export default {
    name: "Application",
    data(){
        return{
            applicationList:[],//申请表列表
            name:'', //管理员姓名
            businessDetail:{
                show:false,
                bNumber:'',
                bName:'',
                bAddress:'',
                bPhone:''
            },//商家详情
            page: {
                currentPage: 1, //当前页码，初始页码为1
                totalCount: 2, //总数居条数，根据接口获取数据长度
                pageSize: 5, //每页显示的条数
                allTableData: [] //全部表格数据
            },
        }
    },
    methods:{
        //获取商家申请列表
        initTable(){
            this.name=sessionStorage.getItem('name');
            if(this.name==null){ //判断是否登录
                ElMessage.error({
                    message:'未找到用户信息，请先登录',
                    duration:1000
                });
            }else {
                axios({
                    url: 'http://localhost:8888/application/getApplicationList',
                    method: 'get',
                }).then((res) => {
                    this.page.allTableData = res.data.data;
                    this.page.totalCount = res.data.total;
                    this.handleCurrentChange(1)
                })
            }
        },
        //获取商家详情
        initBusiness(row){
            axios({
                url: 'http://localhost:8888/businessinfo/getBusinessListByBNumber',
                method: 'get',
                params:{
                    bNumber:row.abnumber
                }
            }).then((res) => {
                this.businessDetail=res.data.data[0];
            })
        },
        //查看详情，将行的值赋给businessDetail
        btnCheckClick(row){
            this.businessDetail.show=true;
            this.businessDetail.bNumber = row.bnumber;
            this.businessDetail.bName = row.bname;
            this.businessDetail.bPhone = row.bphone;
            this.businessDetail.bAddress = row.baddress;
        },
        //同意申请
        btnAgreeClick(row){
            axios({
                url: 'http://localhost:8888/application/applyApplication',
                method: 'post',
                params:{
                    id:row.id,
                    bNumber:row.abnumber
                }
            }).then((res) => {
                if(res.data.success){
                    ElMessage.success({
                        message:'成功同意',
                        duration:1000
                    })
                    this.initTable();
                }
            })
        },
        //拒绝申请
        btnRefuseClick(row){
            axios({
                url: 'http://localhost:8888/application/refuseApplication',
                method: 'post',
                params:{
                    id:row.id
                }
            }).then((res) => {
                if(res.data.success){
                    ElMessage.success({
                        message:'成功拒绝',
                        duration:1000
                    })
                    this.initTable();
                }
            })
        },
        //每页显示的条数
        handleSizeChange(pageSize) {
            this.page.pageSize = pageSize //改变每页显示的条数
            this.page.currentPage = 1 //每次变换单页条数后，将页面切换至第一页
            this.handleSizeChange(1) //获取第一页数据
        },
        //显示当前页数据
        handleCurrentChange(currentPage) {
            this.page.currentPage = currentPage //更新当前页数据
            const pageSize = this.page.pageSize //每页数据量
            this.applicationList = [] //清空表绑定的数据
            //获取当前页数据范围：（当前页-1）*每页数据-当前页*每页数据
            this.applicationList = this.page.allTableData.slice((((currentPage - 1) * pageSize)), (currentPage * pageSize))
        },
        //规定时间形式
        FormatTime(row, column) {
            var date = row[column.property];
            return moment(date).format("YYYY-MM-DD HH:mm:ss");
        }
    },
    mounted() {
        this.initTable();
    }

}
</script>

<style scoped>
.breadcrumb {
    padding: 10px;
}

.dialog-style {
    margin: 20px;
    color: #000;
    font-size: 18px
}
</style>